<template>
  <el-container class="setPassword">
    <el-header class="passwordTitle">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>更改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-form ref="form" label-width="80px" class="loginForm" :model="form" :rules="rules">
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model="form.password" @keyup.native="enabledSubmitBtn"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" class="itemPassword" prop="repeatPassword">
          <el-input type= "password" v-model="form.repeatPassword" @keyup.native="enabledSubmitBtn"></el-input>
        </el-form-item>
        <div class="formBtn">
          <el-button type="primary" size="medium" :disabled="!form.isFilled" @click="submit">确认</el-button>
        </div>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from 'vuex';
// import auth from '../../util/auth';
// import cookie from '../../lib/cookie';
// import CONSTANT from '../../constant/common';

export default {
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else if (!value.match(/[a-zA-Z]{1,16}/)) {
        callback(new Error('密码必须以字母开头，且区分大小写'));
      } else {
        callback();
      }
    };
    return {
      form: {
        password: '',
        repeatPassword: '',
        isFilled: false,
      },
      rules: {
        password: [
          {
            required: true, message: '请输入密码', trigger: 'blur',
          },
          {
            min: 6, max: 16, message: '长度到6-16个字符', trigger: 'blur',
          },
          {
            validator(rule, value, callback) {
              if (!value.match(/[a-zA-Z]{1,16}/)) {
                callback(new Error('密码必须以字母开头，且区分大小写'));
              } else {
                callback();
              }
            },
          },
        ],
        repeatPassword: [
          { validator: validatePass2, trigger: 'blur' },
          {
            required: true, message: '请输入密码', trigger: 'blur',
          },
          {
            min: 6, max: 16, message: '长度到6-16个字符', trigger: 'blur',
          },
        ],
      },
    };
  },
  mounted() {
    const isLogged = Boolean(this.loginObj.id);
    const { role } = this.loginObj;
    const { isFirstLogin } = this.loginObj;
    if (isLogged && role === 'ADMIN' && !isFirstLogin) {
      this.$router.push('/user');
    } else if (isLogged && !isFirstLogin) {
      this.$router.push('/home');
    }
  },
  computed: {
    ...mapState({
      loginObj: state => state.login.loginObj,
    }),
  },
  methods: {
    // todo 改密码跳转接口
    submit() {
      this.$refs.form.validate().then(() => {
        this.$store.dispatch('postPassword', {
          userId: this.loginObj.id,
          newPassword: this.form.password,
        }).then(() => {
          this.$message.success('密码设置成功，即将跳转回首页');
          this.$router.push({
            path: '/',
          });
        });
      });
      // this.$router.push('/account');
    },
    enabledSubmitBtn() {
      if (this.form.password && this.form.repeatPassword) {
        this.form.isFilled = true;
        return;
      }
      this.form.isFilled = false;
    },
  },
};
</script>
<style lang="less">
.setPassword {
  max-width: 450px;
  margin: 0 auto;
  .formBtn {
    text-align: center;
  }
  .passwordTitle {
  border-bottom: 1px solid #efefef;
  .breadcrumb {
    line-height: 60px;
  }
}
}
</style>
